import React from "react";
import { Box, Tabs, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/core";
import SignIn from "./SignIn";
import SignUp from "./SignUp";

function Form() {
  return (
    <Box
      width="400px"
      height="500px"
      bgColor="#f1f1f1"
      textAlign="center"
      margin="100px auto"
      borderRadius="lg"
    >
      <Tabs isFitted pt="30px" colorScheme="red">
        <TabList mx="100px">
          <Tab _focus={{ boxShadow: "none" }}>登录</Tab>
          <span>.</span>
          <Tab _focus={{ boxShadow: "none" }}>注册</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <SignIn />
          </TabPanel>
          <TabPanel>
            <SignUp />
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}

export default Form;
